<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/js/jquery-3.6.0.min.js"></script>
  <style>
    body {
      min-height: 100vh;
    }
  </style>
</head>
<body>
  <span style="background: rgba(200,0,0,10); color: white; font-size:1em; padding: 10px; margin-right: 10px;" id="setting">设置</span>
  <span style="background: rgba(200,0,0,10); color: white; font-size:1em; padding: 10px; margin-right: 10px;" id="fontMIN">字体小</span>
  <span id="fontMsg" style=" margin-right: 10px;"></span>
  <span style="background: rgba(200,0,0,10); color: white; font-size:1em; padding: 10px; margin-right: 10px;" id="fontMAX">字体大</span>
  <div id="div" style="margin: 40vh 0 40vh;" >点击右侧设置</div>
</body>
<script>
  $("#setting").click(() => {
    var text = prompt();
    if(text) {
      set(text);
      localStorage.setItem("TEXT", text);
    }
  });


  var freshFont = (size) => {
    localStorage.setItem("FONT_SIZE", size);
    $("#div").css("font-size", `${size}em`);
    $("#fontMsg").html(`${size}`);
  }

  var currentFontSize = localStorage.getItem("FONT_SIZE");
  if(currentFontSize) {
    currentFontSize = parseFloat(currentFontSize);
  } else {
    currentFontSize = 2;
  }
  freshFont(currentFontSize);
  $("#fontMIN").click(() => {
    currentFontSize = currentFontSize - 0.2;
    if(currentFontSize < 1) {
      currentFontSize = 1;
    }
    freshFont(currentFontSize);
  });
  $("#fontMAX").click(() => {
    currentFontSize = currentFontSize + 0.2;
    freshFont(currentFontSize);
  });
</script>
<script>
  var set = (text) => {
    if(!text) {
      return ;
    }
    var sb = [];
    var array = text.split("\n");
    var colors = ["#f5222d", "#fa541c", "#fa8c16", "#faad14", "#d4b106", "#3f6600", "#13c2c2", "#1890ff", "#722ed1", "#eb2f96"]
    for(var i=0; i<array.length; i++) {
      var c = colors[i%colors.length]
      sb.push(`<div style="color: ${c};">` + array[i] + "</div>");
    }
    $("#div").html(sb.join(""));
  }
  var t = localStorage.getItem("TEXT");
  if(!t) {
    t = `放眼整个人类的历史，
汉末三国，是个英雄辈出、人杰争先，
底层草根反抗最激烈、英雄创建历史的年代，
给了我们遍识英雄本色的大好机会，
观豪杰、学智慧、懂荣辱、讲信义，
古为今用，古今契合。
同时，亦因英雄辈出、互相制衡，不能独霸全国，
也是个朝不保夕的时代，户籍人口由 6700 万变为 800 万。
曹操《蒿里行》中说：
“铠甲生虮虱，百姓以死亡。
白骨露于野，千里无鸡鸣。
生民百遗一，念之断人肠”，
何其惨烈，人们大都缺乏安全感，
哭笑皆从本心，放浪形骸，醒时高谈，醉而恸哭，
生命在此恣意盛放，任性自然。
于这个意义上讲，三国的题材是永恒的。
《世说新语》是魏晋南北朝时期“笔记小说”的代表作，
内容主要是：汉末魏晋名士的言行与轶事。
反映当时文人的思想言行，上层社会的生活面貌，
被鲁迅先生称为“一部名士底（的）教科书”。
鲁迅也曾称赞《世说新语》：
“记言则玄远冷隽jùn，记行则高简瑰奇”。
其文字质朴，意味隽永，表达传神，
也是学习文言文的好材料。
程序员三国“世说新语”系列，聚焦于三国人物故事。  
以文言文+文言注释+白话文+刘孝标注+地图，完整提供。
关注我，用程序员技能读三国。`;
  }
  set(t);
</script>
</html>